<template>
  <div class="app-container">
    <h2>
      {{ title }}
    </h2>
    <el-form :model="formData" ref="formDateRef" :rules="rules" label-width="100px">
      <!--第一行-->
      <el-row :gutter="5">
        <el-col :span="6">
          <el-form-item label="仪器号" prop="instrumentNum" style="width: 100%">
            <el-input v-model="formData.instrumentNum" placeholder="仪器号" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="串口号" prop="serialPort" style="width: 100%">
            <el-input v-model="formData.serialPort" placeholder="串口号" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="波特率" prop="baudRate" style="width: 100%">
            <el-input v-model="formData.baudRate" placeholder="波特率" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="arm版本" prop="armVersion" style="width: 100%">
            <el-input v-model="formData.armVersion" placeholder="arm版本" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row :gutter="5">
        <el-col :span="6">
          <el-form-item label="设备IP地址" prop="devIp" style="width: 100%">
            <el-input v-model="formData.devIp" placeholder="设备IP地址" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备端口号" prop="devPort" style="width: 100%">
            <el-input v-model="formData.devPort" placeholder="设备端口号" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="后台IP地址" prop="backendIp" style="width: 100%">
            <el-input v-model="formData.backendIp" placeholder="后台IP地址" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="后台端口号" prop="backendPort" style="width: 100%">
            <el-input v-model="formData.backendPort" placeholder="后台端口号" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第三行-->
      <el-row :gutter="5">

        <!-- <el-col :span="6">
          <el-form-item label="终端识别码" prop="terminalIdentifier" style="width: 100%">
            <el-input v-model="formData.terminalIdentifier" placeholder="终端识别码" class="custom-input"></el-input>
          </el-form-item>
        </el-col> -->

        <el-col :span="6">
          <el-form-item label="波形点数" prop="wavePoint" style="width: 100%">
            <el-input v-model="formData.wavePoint" placeholder="波形点数" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装置电源" prop="devicePowerSupply" style="width: 100%">
            <el-select clearable filterable v-model="formData.devicePowerSupply" placeholder="装置电源">
              <el-option v-for="dict in devicePowerSupplyOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="dsp版本" prop="dspVersion" style="width: 100%">
            <el-input v-model="formData.dspVersion" placeholder="dsp版本" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第四行-->
      <el-row :gutter="5">
        <el-col :span="6">
          <el-form-item label="子网掩码" prop="devMask" style="width: 100%">
            <el-input v-model="formData.devMask" placeholder="子网掩码" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="网关" prop="devGw" style="width: 100%">
            <el-input v-model="formData.devGw" placeholder="网关" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="对时方式" prop="timeSyncMeth" style="width: 100%">
            <el-select clearable filterable v-model="formData.timeSyncMeth" placeholder="对时方式">
              <el-option v-for="dict in timeSyncMethodOptions" :key="dict.num" :label="dict.name"
                :value="dict.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <!--第六行-->
      <el-row :gutter="5">
        <el-col :span="6">
          <el-form-item label="通讯是否加密" prop="communicationIsEncrypted" style="width: 100%">
            <el-select clearable filterable v-model="formData.communicationIsEncrypted" placeholder="通讯是否加密">
              <el-option v-for="dict in sysYesNoOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="通讯密钥" prop="key" style="width: 100%">
            <el-input v-model="formData.key" placeholder="密钥" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备厂商" prop="devManufacturerName" style="width: 100%">
            <el-input v-model="formData.devManufacturerName" placeholder="设备厂商" class="custom-input"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="设备出厂日期" prop="devProductionDate">
            <el-date-picker v-model="formData.devProductionDate" type="date" placeholder="设备出厂日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第七行-->
      <el-row :gutter="5">
        <el-col :span="6">
          <el-form-item label="维修时间" prop="maintainDate">
            <el-date-picker v-model="formData.maintainDate" type="date" placeholder="维修时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下次维修时间" prop="nextMaintainDate">
            <el-date-picker v-model="formData.nextMaintainDate" type="date" placeholder="下次维修时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第八行-->
      <el-row :gutter="5" type="flex" justify="end">
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit">修改</el-button>
          <el-button type="success" icon="el-icon-position" @click="handleBackTo">返回列表</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  editDeviceDetail,
  getDeviceDetailById,
} from "@/api/device/deviceDetail";

import { getTimeSyncMethod } from "@/api/maintenance/dimensionTables"

export default {
  name: "DeviceEdit",
  components: {},
  data() {
    return {
      formData: {},
      title: "",
      sysYesNoOptions: [],
      commProtocolOptions: [],
      timeSyncMethodOptions: [],
      devicePowerSupplyOptions: [],
      rules: {
        instrumentNum: [{ required: true, message: "请输入仪器号", trigger: "blur" }],
        devIp: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
        devMask: [{ required: true, message: "请输入子网掩码", trigger: "blur" }],
        devGw: [{ required: true, message: "请输入网关", trigger: "blur" }],
        timeSyncMeth: [{ required: true, message: "请选择对时方式", trigger: "change" }],
        // devManufacturerName: [{ required: true, message: "请输入设备厂商", trigger: "blur" }],
        devProductionDate: [{ required: true, message: "请选择设备出厂日期", trigger: "change" }],
      }

    };
  },
  created() {
    this.getList();
    // 是否
    this.getDicts("sys_yes_no").then((response) => {
      this.sysYesNoOptions = response.data;
    });
    // 装置电源
    this.getDicts("power_device").then((response) => {
      this.devicePowerSupplyOptions = response.data;
    });
    // 通信规约
    this.getDicts("zk_dim_commu_protocol").then((response) => {
      this.commProtocolOptions = response.data;
    });
    //对时方式
    getTimeSyncMethod().then((response) => {
      console.log(response.data);

      this.timeSyncMethodOptions = response.data;
    });
  },
  methods: {
    getList() {
      // 将查询出来的数据交给formData;
      const param = this.$route.query.deviceId || 0;
      this.title = this.$route.query.title
      // const terminalIdentifier = this.$route.params.terminalIdentifier
      console.log(this.$route.query)
      getDeviceDetailById(param).then((response) => {
        this.formData = response.data;
        // if (this.formData.terminalIdentifier != terminalIdentifier) {
        //   this.formData.terminalIdentifier = terminalIdentifier
        // }
      });
    },

    handleEdit() {
      //修改逻辑
      this.$refs["formDateRef"].validate((valid) => {
        if (valid) {
          editDeviceDetail(this.formData).then((response) => {
            this.$modal.msgSuccess("修改成功");
            // this.getList();
          });
        } else {
          console.log("校验失败");
          return false;
        }
      });
    },
    handleBackTo() {
      this.$router.push("/index_new");
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-input {
  width: 200px;
}
</style>
